<template>
	<view class="card-page">
		<custom-header title="一卡通" backGroundColor="#000"  :goBackFunc="goBack"
			fontColor="#fff"></custom-header>
		<!-- 用户信息卡片 -->
		<view class="user-card-box">
			<view class="user-card">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar" />
					<view class="info">
						<text class="name">{{userInfo.nickname}}</text>
						<text class="date">有效期：{{userInfo.date}}</text>
					</view>
					<image class="verify-icon" src="/static/image/card/level.png" />
				</view>
				<text class="privilege">享有属谷钱特权</text>
			</view>
		</view>
		<!-- 页面主体内容 -->
		<view class="page-content">
			<!-- 优惠券区域 -->
			<view class="coupon-section">
				<view class="section-title">一卡通专享</view>

				<view class="coupon-item" v-for="(item, index) in coupons" :key="index">
					<view class="left">
						<view class="sale">
							<text class="discount">{{item.discount}}</text>
							<text class="unit">折</text>
						</view>
						<text class="type">{{item.type}}</text>
					</view>
					<view class="middle">
						<text class="desc">{{item.desc}}</text>
						<text class="condition">{{item.condition}}</text>
					</view>
					<view class="button-2-small" @tap="getCoupon(item)">去领取</view>
				</view>
			</view>
			<!-- 邀请好友 -->
			<view class="coupon-section">
				<view class="section-title-box">
					<view class="section-title">邀请有礼</view>
					<view class="notice">
						<image src="/static/image/card/avatar.jpg"></image>
						<text>小..已免费领取一卡通</text>
					</view>
				</view>
				<view class="coupon-item">
					<view class="left" style="background: none;">
						<image src="/static/image/card/yaoqing.png"></image>
					</view>
					<view class="middle">
						<text class="desc">和好友一起免费领取一卡通</text>
						<text class="condition">邀一位，减50元</text>
					</view>
					<view class="button-2-small" @tap="inviteFriend(item)">去邀请</view>
				</view>
				<view class="coupon-item">
					<view class="left" style="background: none;">
						<image src="/static/image/card/yaoqing.png"></image>
					</view>
					<view class="middle">
						<text class="desc">和好友一起免费领取一卡通</text>
						<text class="condition">邀一位，减50元</text>
					</view>
					<view class="button-2-small" @tap="inviteFriend(item)">去邀请</view>
				</view>
				<view class="coupon-item">
					<view class="left" style="background: none;">
						<image src="/static/image/card/yaoqing.png"></image>
					</view>
					<view class="middle">
						<text class="desc">和好友一起免费领取一卡通</text>
						<text class="condition">邀一位，减50元</text>
					</view>
					<view class="button-2-small" @tap="inviteFriend(item)">去邀请</view>
				</view>
			</view>
		</view>
		<!-- 底部购买按钮 -->
		<view class="bottom-btn bottom-button-container">
			<view class="button-2" @tap="handleBuy">
				<text class="price">¥ 449</text>
				<text>立即购买</text>
			</view>
			<text class="discount-tag">已邀1人，已减￥50</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: '趴膝者6770779',
					avatar: '/static/image/card/avatar.jpg',
					date: '2024/07/01'
				},
				coupons: [{
						discount: '0',
						type: '免费券',
						desc: '免费劳天领',
						condition: '无门槛 无限领'
					},
					{
						discount: '0.1',
						type: '特价券',
						desc: '特价劳天领',
						condition: '无门槛 无限领'
					}
				]
			}
		},
		onShow() {
			// 隐藏tabbar
			uni.hideTabBar()
		},
		methods: {
			goBack() {
				// 显示tabbar
				uni.showTabBar();
				// 返回首页
				uni.switchTab({
					url: '/pages/tabbar/home/home'
				})
			},
			getCoupon(coupon) {
				uni.showToast({
					title: '领取成功',
					icon: 'success'
				})
			},
			inviteFriend() {
				uni.navigateTo({
					url: '/subPackages/invite/invite'
				})
			},
			handleBuy() {
				uni.navigateTo({
					url:"/subPackages/payment/payment"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./card.scss";
</style>